<template>
  <div class="box">
    <el-dialog title="工单配置" :visible="value" width="30%" @close="close">
      <div>
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item label="补充警戒线：" prop="num">
            <el-input-number
              placeholder="请输入"
              v-model="form.num"
              style="width: 70%"
              controls-position="right"
              :min="1"
              :max="100"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="qx" @click="close">取 消</el-button>
        <el-button class="qd" type="primary" @click="enter">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getValue, getAutoValue } from '@/api/work'
export default {
  name: 'config-page',
  props: {
    value: { type: Boolean },
    getList: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      form: {
        num: 0
      },
      rules: {
        num: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  methods: {
    close() {
      this.$emit('input', false)
    },
    async enter() {
      this.$emit('input', false)
      await getAutoValue({ alertValue: this.form.num })
      this.getList()
    }
  },
  async created() {
    this.form.num = await getValue()
  }
}
</script>

<style scoped lang="scss">
.box {
  width: 224px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  .qx {
    background-color: #fbf4f0;
    border: none;
  }
  .qd {
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: none;
  }
}
</style>
